<template>

	<view class="u-page">
		<!-- 搜索头部 -->
		<view class="header">
				<view class="nav-bar">
				<uni-nav-bar  :border="border"  statusBar="true" backgroundColor="transparent">
					 <view slot="left" class="sitename">{{site}}</view>
				</uni-nav-bar>
				</view>
		</view>
		<view class="major-content">
			<!-- banner -->
			<view class="swiperList">
				<view class="integral_section" v-if="searchStatus == 1">
					 <view class="uninput" @click="goPage('/pages/index/search')">
					  <!-- <uni-search-bar radius='50' bgColor="#ffffff" placeholder="请输入项目关键字搜索" cancelButton="none" ></uni-search-bar> -->
					      <input class="search" type="text" placeholder="请输入项目关键字搜索"  disabled="true" />
			
					  </view>
				</view>
				<uni-swiper-dot :info="list" :current="current"   field="content" mode="default">
				    <swiper :autoplay="autoplay" class="swiper-box"  @change="change">
				        <swiper-item v-for="(item ,index) in banner" :key="index">
				            <view class="swiper-item" >
				                <image :src="item.img" mode="widthFix"></image> 
				            </view>
				        </swiper-item>
				    </swiper>
				</uni-swiper-dot>
			</view>
			<!-- conctent -->
			<view class="content">
				<view class="u-page__item" @click="goPage('/pages/index/launch')">
						<uni-row class="demo-uni-row">
							<uni-col :span='7'>
								<view class="demo-layout bg-purple"> <image src="../../static/icon/celladd.png" mode=""></image></view>
							</uni-col>
							<uni-col :span='15'>
								<view class="demo-layout bg-purple-light"><view class="title">发起新项目</view><view class="titleinfo">{{launchInfo}}</view></view>
							</uni-col>
							<uni-col :span='2'>
							<view class="bg-purple-dark" style="display: flex;justify-content: flex-end;"><image src="../../static/icon/cellmore.png" mode=""></image></view>
							</uni-col>
						</uni-row>
				</view>
				<view class="jiange">
					
					<uni-row class="demo-uni-row">
						<uni-col :span='12'>
							<view class="remen">热门项目 </view>
						</uni-col>
						<uni-col :span='12'>
							<view class="more" @click="goPage('/pages/index/moreProject')">更多 <image src="../../static/icon/more.png" mode=""></image></view>
						</uni-col>
					</uni-row>
				</view>
				
				<view class="list">
						<block v-for="(item, index) in projects" :key="item.pid">
							<view class="lists" @click="project(item.pid)">
								<view class="images"><image :src="item.pic" mode=""></image></view>
								<view class="list_contnet">
									<view class="projecttitle ellipsis-sample">{{item.title}}</view>
									<view class="projectinfo ellipsis-sample"> {{item.contentInfo}}</view>
								</view>
								<view class="tags ellipsis-sample">
									<block v-for="(tag,index1) in item.tag" :key='index1'>
										<text class="tag" type="primary">{{tag}}</text>
									</block>
									<image src="../../static/icon/cellmore.png" mode=""></image>
								</view>
							</view>
						</block>
						
				</view>
			</view>
				
		</view>
		
	</view>
</template>

<script>
	import WXBizDataCrypt from '@/lib/WXBizDataCrypt.js';	

	let App = getApp();
	export default {
		
		data() {
			return {
				
				border:false,
				autoplay:true,
				site:"云上石榴",
				current: 0,
				currentNum: 0,
				searchStatus:0,
				banner: [],
				projects: [],
				userData:{},
				launchInfo:''
				
			}
		},
		async onShow() {
			this.abc()
			//获取手机号
			
				let user = uni.getStorageSync('userData');
				if(uni.getStorageSync('userData')){
					this.userData = user
				}
				
			
		},
		onLoad(e) {
			console.log('fenxiang ----',e);
		},
	
		methods: {
			// 6bbca2b9-2b8a-43c4-a62b-ab486e95159b
			goPage(page){
				let user = uni.getStorageSync('userData');
				if(!user){
					uni.navigateTo({
						url:"/pages/user/login"
					})
				}else{
					uni.navigateTo({
						url:page
					})
				}
				
			},
			//默认获取数据 banner 设置   项目
			async abc(){
				// 获取设置/
				const siteName = await this.GQL({
					"operationName": "allSlSystemConfigs",
					"query": "query allSlSystemConfigs($filter: SlSystemConfigFilter) { allSlSystemConfigs(filter: $filter) { nodes { id siteName searchStatus menuName launchInfo} } }",
					"variables": {"filter": {"menuName": {"equalTo": "site_name"}}}
				})
				const banner = await this.GQL({
					"operationName": "allSlSystemBanners",
					"query": "query allSlSystemBanners($filter: SlSystemBannerFilter) { allSlSystemBanners(filter:$filter) { nodes { id img nodeId solt title url status } } }",
					"variables": {"filter": {"status": {"equalTo": "1"},"type":{"equalTo":"2"}}}
				})
				const project = await this.GQL({
						"operationName": "allSlProjects",
						"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter: $filter) { nodes { title type tag status pic pid contentInfo } } }",
						"variables": {"filter": {"status": {"equalTo": "1"},"isDelete":{"equalTo": "0"}}}
				})
				if(siteName.data.allSlSystemConfigs.nodes != ''){
					this.site = siteName.data.allSlSystemConfigs.nodes[0].siteName
					this.launchInfo = siteName.data.allSlSystemConfigs.nodes[0].launchInfo
					this.searchStatus = siteName.data.allSlSystemConfigs.nodes[0].searchStatus
				}
				this.banner = banner.data.allSlSystemBanners.nodes
				if(project.data.allSlProjects.nodes != ''){
					project.data.allSlProjects.nodes.forEach(function (item, index) {
						if(item.tag){
							item.tag = item.tag.split(',')
						}
					});
					this.projects = project.data.allSlProjects.nodes
				}
			},
			change(e) {
				this.current = e.detail.current;
			},
			project(id){
				let user = uni.getStorageSync('userData');
				if(!user){
					uni.navigateTo({
						url:"/pages/user/login"
					})
				}else{
					uni.navigateTo({
						url: '/pages/project/index?id='+id
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	
	.u-page{
		background-color: #f0f2f5;
	}
	/* 头部 */
	.header{
		width: 100%;
		height: 400rpx;
		/* color: #FFFFFF; */
		background: linear-gradient(#C7171E, #f0f2f5); /* 标准的语法 */
		
		.nav-bar{
			.uni-navbar__header{
				padding-left:15px ;
			}
			/deep/.uni-navbar__header-btns-left{
				width: 100%!important;
			}
			.sitename{
				height: 50px;
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 550;
				text-align: left;
				color: #FFFFFF;
				width: 100%;
			}
		}
		
		
	}
	.major-content{
		position: absolute;
		top: 170rpx;
	}
	.swiperList{
		.integral_section{
			.uni-searchbar {
				padding: 0px;
				margin: 32rpx 0px;
			}
			.uni-searchbar__box {
				width: 100%;
				height: 80rpx;
				color: #bbbbbb;
				font-size: 28rpx;
				justify-content:flex-start;
			}
			.search{
				background: #FFFFFF;
				border-radius: 20px;
				padding-left: 48rpx;
				margin: 10px 0px;
				height: 80rpx;
				box-sizing: border-box;
				background-image: url(../../static/icon/Search.png);
				background-repeat: no-repeat;
				background-size: 28rpx 28rpx;
				background-position: 634rpx center;
				.uni-input-placeholder{
					font-size: 28rpx;
					color: #9BA7C1;
				}
			}
		}
		
		// height: 300rpx;
		margin: 24rpx 32rpx;
		.uni-swiper__warp {
			border-radius: 10px;
			box-shadow: 0 10rpx 50rpx 2rpx rgba(55,58,64,0.14);
		}
		
		.swiper-box{
			height: 276rpx;
			.swiper-item{
				border-radius: 10px;
				image{
					width: 686rpx;
					height: 276rpx;
					border-radius: 10px;
				}
			}
		}
	}
	.content{
		margin: 0px 32rpx;
	}
	
	.u-page__item{
		padding-right: 16px;
		height: 80px;
		margin-bottom: 40rpx;
		border-bottom: 0px;
		// border: 0px solid #bbbbbb;
		box-shadow: 0 10rpx 50rpx 2rpx rgba(55,58,64,0.14);
		border-radius: 29rpx;
		background-color: #FFFFFF;
		.bg-purple{
			display:flex;
			align-items:center;
			justify-content:center;
			height: 80px;
		}
		.bg-purple image{
			width: 61px;
			height: 60px;
		}
		.bg-purple-light{
			height: 80px;
		}
		
		.title{
			padding-top:18px ;
			font-size: 32rpx;
			color: #161E3E;
			font-weight: 600;
		}
		.titleinfo{
			margin-top: 5px;
			font-size: 24rpx;
			font-weight: 400;
			color: #9BA7C1;
		}
		.bg-purple-dark{
			display:flex;
			align-items:flex-end;
			height: 65px;
			image{
				width: 20px;
				height: 20px;
			}
		}
	}
		
	.jiange{
		
		width: 100%;
		.remen{
			font-size: 32rpx;
			color: #161E3E;
			font-weight: bold;
		}
		
		.more{
			text-align: right;
			font-size: 24rpx;
			color: #9BA7C1 ;
			image{
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
	.lists{
		width: 686rpx;
		height: 460rpx;
		margin-top: 12px;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 32rpx;
		box-sizing: border-box;
		box-shadow: 0 10rpx 50rpx 2rpx rgba(55,58,64,0.14);
		image {
			width: 622rpx;
			height: 240rpx;
			border-radius: 10rpx;
		}
		&:last-child{
			// margin-bottom: 110rpx;
		}
		.list_contnet{
			.projecttitle{
				font-size: 32rpx;
				color: #161E3E;
				margin-top: 14rpx;
				margin-bottom: 12rpx;
				line-height: 1;
			}
			.projectinfo{
				font-size: 24rpx;
				color: #9BA7C1;
				margin-bottom: 18rpx;
				width: 100%;
				overflow:hidden;
				line-height: 1;
			}
			
		}
		.tags{
			position: relative;
			height: 46rpx;
			line-height: 46rpx;
			.tag{
				height: 38rpx;
				line-height: 38rpx;
				padding: 4rpx 10rpx;
				border-radius: 20rpx;
				border: 2rpx solid;
				font-size: 22rpx!important;
				margin-left: 10rpx!important;
				box-sizing: border-box;
				vertical-align: middle; 
				&:first-child{
					margin-left: 0px!important ;
					background-color: #FFE1E2!important;
					border-color: #FFB4B7!important;
					color: #C7171E!important;
				}
				&:nth-child(2n){
					background-color: #FFEBCD!important;
					border-color: #FFD598!important;
					color: #EC8C00!important;
				}
				&:nth-child(3n){
					background-color: #DCFFE3!important;
					border-color: #B1F7BF!important;
					color: #02B327!important;
				}
				&:nth-child(4n){
					background-color: #EFE4FF!important;
					border-color: #A88AD5!important;
					color: #4500AC!important;
				}
			}
			image{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 0rpx;
			}
		}
		
		
	}
	.phoneNumber{
		
	}
	
	
</style>
